<template>
<div>
  <div class="info-top">
    <a-row>
      <a-col :span="10" :style="{background: '#fff'}">
        <div class="table-btn-flex">
          <div>
            <a-radio-group v-model:value="activeKey" style="margin: 8px" @change="changeRadio">
              <a-radio-button value="1">合同信息</a-radio-button>
              <a-radio-button value="2">合同标签</a-radio-button>
            </a-radio-group>
          </div>
          <div  class="pdf-info-btn" v-if="activeKey === '1'">
            <a-button type="link" @click="editClick">
              <template #icon>
                <EditOutlined />
              </template>
              编辑
            </a-button>
            <a-button :style="{margin: '0 10px'}" type="link" v-if="isEdit" @click="saveClick">
              保存
            </a-button>
            <a-button type="link" v-if="isEdit" @click="cancelClick">
              取消
            </a-button>
          </div>
        </div>
        <div :style="{margin: '0 24px'}">
          <a-divider :style="{background: '#fff', margin: '0'}"/>
        </div>
        <div v-if="activeKey === '1'">
          <div class="info-left">
<!--            <div class="info-head">-->
<!--              <div class="pdf-title">合同信息</div>-->
<!--              <div  class="pdf-info-btn">-->
<!--                <a-button type="link" @click="editClick">-->
<!--                  <template #icon>-->
<!--                    <EditOutlined />-->
<!--                  </template>-->
<!--                  编辑-->
<!--                </a-button>-->
<!--                <a-button :style="{margin: '0 10px'}" type="link" v-if="isEdit" @click="saveClick">-->
<!--                  保存-->
<!--                </a-button>-->
<!--                <a-button type="link" v-if="isEdit" @click="cancelClick">-->
<!--                  取消-->
<!--                </a-button>-->
<!--              </div>-->
<!--            </div>-->
            <div class="descriptions-box">
              <a-descriptions :column="1" :labelStyle="labelStyle">
                <a-descriptions-item label="合同名称">
                  <span>{{formState.contractName}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="合同编号">
                  <span>{{formState.contractNumber}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="文件类型">
                  <a-radio-group v-if="isEdit" v-model:value="formState.fileType">
                    <a-radio :value="1">term sheet</a-radio>
                    <a-radio :value="2">合同文件</a-radio>
                  </a-radio-group>
                  <span v-else>{{formState.fileType === 1? 'term sheet' : '合同文件'}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="补充合同原件" v-if="formState.status === 1">
                  <a-button @click="showFileModel" class="border-btn">
                    <template #icon>
                      <UploadOutlined/>
                    </template>
                    点击上传
                  </a-button>
                </a-descriptions-item>
                <a-descriptions-item label="合同类型">
                  <a-select v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.contractType" placeholder="请选择合同类型" :options="contractTypeAreas" />
                  <span v-else>
                   <span v-for="item in contractTypeAreas" :key="item.label">
                    <span v-if="item.value === formState.contractType">{{item.label}}</span>
                  </span>
                </span>
                </a-descriptions-item>
                <a-descriptions-item label="贸易主体">
                  <a-select v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.tradeBody" placeholder="请选择贸易主体" :options="tradeareas" />
                  <span v-else>
                <span v-for="item in tradeareas" :key="item.label">
                  <span v-if="item.value === formState.tradeBody">{{item.label}}</span>
                 </span>
               </span>
                </a-descriptions-item>
                <a-descriptions-item label="合同签订日期">
                  <a-date-picker v-if="isEdit" :style="{width: '100%'}" v-model:value="formState['signingDate']"  value-format="YYYY-MM-DD" />
                  <span v-else> {{formState.signingDate}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="IMO">
                  <a-input v-if="isEdit" v-model:value="formState.imo" placeholder="请输入IMO"/>
                  <span v-else @click="searchTxtPostion(formState.imo)">{{formState.imo? formState.imo : '暂无数据'}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.shipNameValLoc.name, OCRInfo.shipNameValLoc)" >船舶名称</span>
                  </template>
                  <a-input v-if="isEdit" v-model:value="formState.shipName" placeholder="请输入船舶名称"></a-input>
                  <span v-else @click="searchTxtPostion(OCRInfo.shipNameValLoc.filedValue, OCRInfo.shipNameValLoc)"> {{formState.shipName}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.shipownerValLoc.name, OCRInfo.shipownerValLoc)" >船东</span>
                  </template>
                  <a-input v-if="isEdit" v-model:value="formState.shipowner" placeholder="请输入船东"></a-input>
                  <span v-else @click="searchTxtPostion(OCRInfo.shipownerValLoc.filedValue, OCRInfo.shipownerValLoc)"> {{formState.shipowner}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.tenantValLoc.name, OCRInfo.tenantValLoc)" >租家</span>
                  </template>
                  <a-input v-if="isEdit" v-model:value="formState.tenant" placeholder="请输入租家"></a-input>
                  <span v-else @click="searchTxtPostion(OCRInfo.tenantValLoc.filedValue, OCRInfo.tenantValLoc)"> {{formState.tenant}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.leaseTermStrValLoc.name, OCRInfo.leaseTermStrValLoc)" >租期</span>
                  </template>
                  <div  v-if="isEdit" :style="{width: '100%'}">
                    <a-input-number  v-model:value="formState.leaseTerm" class="numipt1" placeholder="请输入租期"  :min="1" >
                    </a-input-number>
                    <a-input  class="numipt2" :style="{width: '30px', background: '#fff', padding: 0, textAlign: 'center', fontSize: '19px'}"  disabled  v-model:value="formState.Capacity1"></a-input>
                    <a-input-number class="numipt3"
                                    :min="0"
                                    :max="100"
                                    placeholder="请输入"
                                    v-model:value="formState.leaseTermValueUp"
                    />
                    <a-input  class="numipt4" :style="{width: '30px', background: '#fff', padding: 0, textAlign: 'center', fontSize: '19px'}"  disabled  v-model:value="formState.Capacity3"></a-input>
                    <a-input-number class="numipt5"
                                    :min="0"
                                    :max="100"
                                    placeholder="请输入"
                                    v-model:value="formState.leaseTermValueUpDown "
                    />
                  </div>
                  <span v-else @click="searchTxtPostion(OCRInfo.leaseTermStrValLoc.filedValue, OCRInfo.leaseTermStrValLoc)">{{formState.leaseTermStr? `${formState.leaseTermStr}` : ''}}</span>
                </a-descriptions-item>
<!--                <a-descriptions-item label="起租日期">-->
<!--                  <a-range-picker :locale="locale"  :style="{width: '100%'}"-->
<!--                                  v-if="isEdit"-->
<!--                                  v-model:value="formState['startingDateOfLeases']"-->
<!--                                  :show-time="{ format: 'HH:mm' }" value-format="YYYY-MM-DD HH:mm"/>-->
<!--                  <span v-else>{{formState.startingDateOfLease}}</span>-->
<!--                </a-descriptions-item>-->
                <a-descriptions-item label="租金">
                    <div  v-if="isEdit"  :style="{width: '100%'}">
<!--                      <a-input-number :style="{width: '100%'}" v-model:value="formState.rent"  placeholder="请输入租金（每天）">-->
<!--                        <template #addonAfter>-->
<!--                          <a-select  style="width: 100px" v-model:value="formState.currency">-->
<!--                            <a-select-option :value="1">美元</a-select-option>-->
<!--                            <a-select-option :value="2">人民币</a-select-option>-->
<!--                            <a-select-option :value="3">欧元</a-select-option>-->
<!--                          </a-select>-->
<!--                        </template>-->
<!--                      </a-input-number>-->
                      <a-form
                          ref="formRentRef"
                          name="dynamic_form_nest_item_rent"
                          :model="formState"
                      >
                        <a-space
                            v-for="(user, index) in formState.rentList"
                            :key="user.id"
                            style="display: flex;"
                            align="baseline"
                        >
                          <a-form-item
                              :name="['rentList', index, 'rentDateBegin']"
                              :rules="{ required: true, message: '请选择开始时间'}"
                          >
                            <a-date-picker :locale="locale"  :style="{width: '100%'}"   :show-time="{ format: 'HH:mm' }"
                                           value-format="YYYY-MM-DD HH:mm" v-model:value="user.rentDateBegin" placeholder="请选择开始时间"></a-date-picker>
                          </a-form-item>
                          <span>—</span>
                          <a-form-item
                              :name="['rentList', index, 'rentDateEnd']"
                              :rules="{required: true, message: '请选择结束时间'}"
                          >
                            <a-date-picker :locale="locale" :style="{width: '100%'}"   :show-time="{ format: 'HH:mm' }"
                                           value-format="YYYY-MM-DD HH:mm" v-model:value="user.rentDateEnd" placeholder="请选择结束时间"></a-date-picker>
                          </a-form-item>
                          <a-form-item
                              :name="['rentList', index, 'rentParagraph']"
                              :rules="{required: true, message: '请输入租金'}"
                          >
                            <a-input-number :style="{width: '100%', marginTop: '-5px'}" v-model:value="user.rentParagraph"  placeholder="请输入租金（每天）">
                              <template #addonAfter>
                                <a-select  style="width: 100px" v-model:value="user.rentUnit">
                                  <a-select-option :value="1">美元</a-select-option>
                                  <a-select-option :value="2">人民币</a-select-option>
                                  <a-select-option :value="3">欧元</a-select-option>
                                </a-select>
                              </template>
                            </a-input-number>
                          </a-form-item>
                          <MinusCircleOutlined @click="removeRent(user)" />
                        </a-space>
                        <a-form-item>
                          <a-button type="dashed" block @click="addRent" class="search-btn2">
                            <PlusOutlined />
                          </a-button>
                        </a-form-item>
                      </a-form>
                    </div>
                  <div v-else>
                    <div v-if="formState.rentList.length > 0">
                      <div v-for="(item, index) in formState.rentList" :key="index" :style="{marginBottom: '5px',display: 'flex'}">
                        <span>{{dayjs(item.rentDateBegin).format('YYYY年MM月DD日 HH:mm:ss')}}</span>
                        <span> - </span>
                        <span :style="{paddingRight: '10px'}">{{dayjs(item.rentDateEnd).format('YYYY年MM月DD日 HH:mm:ss')}}</span>
                        <a-dropdown placement="bottomLeft">
                          <div v-if="item.rentParagraph">
                            <span>{{item.rentParagraphStr}}</span>
                          </div>
                          <template #overlay>
                            <a-menu>
                              <a-menu-item>人民币：{{formState.rentParagraph}}</a-menu-item>
                              <a-menu-item>美元：{{formState.rentParagraph}}</a-menu-item>
                              <a-menu-item>欧元：{{formState.rentParagraph}}</a-menu-item>
                            </a-menu>
                          </template>
                        </a-dropdown>
                      </div>
                    </div>
                  </div>

                </a-descriptions-item>
                <a-descriptions-item label="SIRE证书有效持续时间">
                          <a-date-picker :locale="locale"  :style="{width: '100%'}"
                                                  v-if="isEdit"
                                                  v-model:value="formState['cerTime']"
                                                  value-format="YYYY-MM-DD"/>
                      <span v-else>{{formState.cerTimeStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.deliveryDateValLoc.name, OCRInfo.deliveryDateValLoc)" >交船日期</span>
                  </template>
                  <a-range-picker :locale="locale"  :style="{width: '100%'}" v-if="isEdit" v-model:value="formState['deliveryDates']"
                                  :show-time="{ format: 'HH:mm' }"
                                  value-format="YYYY-MM-DD HH:mm"/>
                  <span v-else @click="searchTxtPostion(OCRInfo.deliveryDateValLoc.filedValue, OCRInfo.deliveryDateValLoc)">{{formState.deliveryDate}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.placeOfDeliveryOfShipValLoc.name, OCRInfo.placeOfDeliveryOfShipValLoc)" >交船地点</span>
                  </template>
                  <a-input v-if="isEdit" v-model:value="formState.placeOfDeliveryOfShip" placeholder="请输入交船地点"/>
                  <span v-else @click="searchTxtPostion(OCRInfo.placeOfDeliveryOfShipValLoc.filedValue, OCRInfo.placeOfDeliveryOfShipValLoc)"> {{formState.placeOfDeliveryOfShip}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="还船日期">
                  <a-range-picker v-if="isEdit" :locale="locale"  :style="{width: '100%'}" v-model:value="formState['redeliveryDates']"
                                  :show-time="{ format: 'HH:mm' }"
                                  value-format="YYYY-MM-DD HH:mm"
                  />
                  <span v-else> {{formState.redeliveryDate}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.placeOfRedeliveryOfShipValLoc.name, OCRInfo.placeOfRedeliveryOfShipValLoc)" >还船地点</span>
                  </template>
                  <a-input v-if="isEdit" v-model:value="formState.placeOfRedeliveryOfShip" placeholder="请输入还船地点"/>
                  <span v-else @click="searchTxtPostion(OCRInfo.placeOfRedeliveryOfShipValLoc.filedValue, OCRInfo.placeOfRedeliveryOfShipValLoc)"> {{formState.placeOfRedeliveryOfShip}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="船速（Service Speed）">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.shipSpeed" placeholder="请输入船速（Service Speed）">
                    <template #addonAfter>
                      <div class="numAfter">
                        Knots
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.shipSpeedStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="船速（交还船费）">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.shipSpeedForRedeliveryFee" placeholder="请输入船速（交还船费）">
                    <template #addonAfter>
                      <div class="numAfter">
                        Knots
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.shipSpeedForRedeliveryFeeStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.deliveryStatusValLoc.name, OCRInfo.deliveryStatusValLoc)" >交船状态</span>
                  </template>
                  <a-input v-if="isInput && isEdit"  v-model:value="formState.deliveryStatus" placeholder="请输入交船状态">
                    <template #suffix>
                      <DownOutlined @click="changeCutom" style="color: rgba(0, 0, 0, 0.45)" />
                    </template>
                  </a-input>
                  <a-select :style="{width: '100%'}" v-if="isEdit && !isInput"
                            v-model:value="formState.deliveryStatus"
                            placeholder="请选择交船状态" :options="areas1"
                            :defaultOpen="selectOpen"
                            @change="delSelectChange"
                  />
                  <span v-else v-for="item in areas1" :key="item.label">
                    <span v-if="item.value === formState.deliveryStatus && typeof formState.deliveryStatus !== 'number'">
                      <span @click="searchTxtPostion(OCRInfo.deliveryStatusValLoc.filedValue, OCRInfo.deliveryStatusValLoc)">{{item.label}}</span>
                    </span>
                  </span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.redeliveryStatusValLoc.name, OCRInfo.redeliveryStatusValLoc)" >还船状态</span>
                  </template>
                  <a-input-number v-if="isEdit" :style="{width: '100%'}"  v-model:value="formState.redeliveryStatus" placeholder="请输入还船状态（cubic metres）">
                    <template #addonAfter>
                      <div class="numAfter">
                        m³
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else @click="searchTxtPostion(OCRInfo.redeliveryStatusValLoc.filedValue, OCRInfo.redeliveryStatusValLoc)">{{formState.redeliveryStatusStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="交船燃油量·LSMGO">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.deliveryFuelQuantity" placeholder="请输入交船燃油量（metric tonnes）">
                    <template #addonAfter>
                      <div class="numAfter">
                        MT
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.deliveryFuelQuantityStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="还船燃油量·LSMGO">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}"  v-model:value="formState.refundFuelQuantity" placeholder="请输入还船燃油量（metric tonnes）">
                    <template #addonAfter>
                      <div class="numAfter">
                        MT
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.refundFuelQuantityStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="交船燃油量·VLSFO">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.vlDeliveryFuelQuantity" placeholder="请输入交船燃油量·VLSFO">
                    <template #addonAfter>
                      <div class="numAfter">
                        MT
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.vlDeliveryFuelQuantityStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="还船燃油量·VLSFO">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}"  v-model:value="formState.vlrefundFuelQuantity" placeholder="请输入还船燃油量·VLSFO">
                    <template #addonAfter>
                      <div class="numAfter">
                        MT
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.vlRefundFuelQuantityStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="交船 LNG 量">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.deliveryLngVolume" placeholder="请输入交船 LNG 量（cubic metres）">
                    <template #addonAfter>
                      <div class="numAfter">
                        m³
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.deliveryLngVolumeStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="还船 LNG 量">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}"  v-model:value="formState.lngQuantityReturnedToTheShip" placeholder="请输入还船 LNG 量（cubic metres）">
                    <template #addonAfter>
                      <div class="numAfter">
                        m³
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.lngQuantityReturnedToTheShipStr}}</span>
                </a-descriptions-item>

                  <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.deliveryNoticeValLoc.name, OCRInfo.deliveryNoticeValLoc)" >交船通知</span>
                  </template>
                  <a-textarea v-if="isEdit" :rows="4"  v-model:value="formState.deliveryNotice" placeholder="请输入交船通知"></a-textarea>
                  <span v-else @click="searchTxtPostion(OCRInfo.deliveryNoticeValLoc.filedValue, OCRInfo.deliveryNoticeValLoc)">  {{formState.deliveryNotice}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.redeliveryNoticeValLoc.name, OCRInfo.redeliveryNoticeValLoc)" >还船通知</span>
                  </template>
                  <a-textarea v-if="isEdit" :rows="4"  v-model:value="formState.redeliveryNotice" placeholder="请输入还船通知"></a-textarea>
                  <span v-else @click="searchTxtPostion(OCRInfo.redeliveryNoticeValLoc.filedValue, OCRInfo.redeliveryNoticeValLoc)"> {{formState.redeliveryNotice}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="舱容">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.cabinCapacity" placeholder="请输入舱容">
                    <template #addonAfter>
                      <div class="numAfter">
                        m³
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.cabinCapacityStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="交船费">
                  <a-input-number v-if="isEdit" v-model:value="formState.deliveryFee" :style="{width: '100%'}" placeholder="请输入交船费"
                                  :min="1" >
                    <template #addonAfter>
                      <a-select  style="width: 100px" v-model:value="formState.currency">
                        <a-select-option :value="1">美元</a-select-option>
                        <a-select-option :value="2">人民币</a-select-option>
                        <a-select-option :value="3">欧元</a-select-option>
                      </a-select>
                    </template>
                  </a-input-number>
                  <a-dropdown placement="bottomLeft" v-else>
                    <div v-if="formState.deliveryFee">
                      <span>{{formState.deliveryFeeStr}}
<!--                        <span v-for="item in moneyAreas" :key="item.label">-->
<!--                        <span v-if="item.value === formState.currency">{{item.label}}</span>-->
<!--                       </span>-->
                      </span>
                    </div>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>人民币：{{formState.deliveryFee}}</a-menu-item>
                        <a-menu-item>美元：{{formState.deliveryFee}}</a-menu-item>
                        <a-menu-item>欧元：{{formState.deliveryFee}}</a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </a-descriptions-item>
                <a-descriptions-item label="还船费">
                  <a-input-number v-if="isEdit" v-model:value="formState.redeliveryFee" :style="{width: '100%'}" placeholder="请输入还船费"
                                  :min="1" >
                    <template #addonAfter>
                      <a-select  style="width: 100px" v-model:value="formState.currency">
                        <a-select-option :value="1">美元</a-select-option>
                        <a-select-option :value="2">人民币</a-select-option>
                        <a-select-option :value="3">欧元</a-select-option>
                      </a-select>
                    </template>
                  </a-input-number>
                  <a-dropdown placement="bottomLeft" v-else>
                    <div v-if="formState.redeliveryFee">
                      <span>{{formState.redeliveryFeeStr}}
<!--                        <span v-for="item in moneyAreas" :key="item.label">-->
<!--                        <span v-if="item.value === formState.currency">{{item.label}}</span>-->
<!--                       </span>-->
                      </span>
                    </div>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>人民币：{{formState.redeliveryFee}}</a-menu-item>
                        <a-menu-item>美元：{{formState.redeliveryFee}}</a-menu-item>
                        <a-menu-item>欧元：{{formState.redeliveryFee}}</a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </a-descriptions-item>
                <a-descriptions-item label="距离">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.shipDistance" placeholder="请输入距离">
                    <template #addonAfter>
                      <div class="numAfter">
                        海里
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.shipDistanceStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="宣布留底量">
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.declareReserveAmount" placeholder="请输入宣布留底量（天）">
                    <template #addonAfter>
                      <div class="numAfter">
                        天
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.declareReserveAmountStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="权利方">
                  <a-input v-if="isEdit" :style="{width: '100%'}"  v-model:value="formState.rightsHolder" placeholder="请输入权力方"></a-input>
                  <span v-else> {{formState.rightsHolder}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="LNG 价格（交船）">
                  <a-input-number v-if="isEdit" v-model:value="formState.lngPriceDelivery" :style="{width: '100%'}" placeholder="请输入LNG 价格（交船））"
                                  :min="1" >
                    <template #addonAfter>
                      <a-select  style="width: 100px" v-model:value="formState.currency">
                        <a-select-option :value="1">美元</a-select-option>
                        <a-select-option :value="2">人民币</a-select-option>
                        <a-select-option :value="3">欧元</a-select-option>
                      </a-select>
                    </template>
                  </a-input-number>
                  <a-dropdown placement="bottomLeft" v-else>
                    <div v-if="formState.lngPriceDelivery">
                      <span>{{formState.lngPriceDeliveryStr}}
<!--                        <span v-for="item in moneyAreas" :key="item.label">-->
<!--                        <span v-if="item.value === formState.currency">{{item.label}}</span>-->
<!--                       </span>-->
                      </span>
                    </div>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>人民币：{{formState.lngPriceDelivery}}</a-menu-item>
                        <a-menu-item>美元：{{formState.lngPriceDelivery}}</a-menu-item>
                        <a-menu-item>欧元：{{formState.lngPriceDelivery}}</a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </a-descriptions-item>
                <a-descriptions-item label="LNG 价格（还船）">
                  <a-input-number v-if="isEdit" v-model:value="formState.lngPriceRedelivery" :style="{width: '100%'}" placeholder="请输入LNG 价格（还船）"
                                  :min="1" >
                    <template #addonAfter>
                      <a-select  style="width: 100px" v-model:value="formState.currency">
                        <a-select-option :value="1">美元</a-select-option>
                        <a-select-option :value="2">人民币</a-select-option>
                        <a-select-option :value="3">欧元</a-select-option>
                      </a-select>
                    </template>
                  </a-input-number>
                  <a-dropdown placement="bottomLeft" v-else>
                    <div v-if="formState.lngPriceRedelivery">
                      <span>{{formState.lngPriceRedeliveryStr}}
<!--                        <span v-for="item in moneyAreas" :key="item.label">-->
<!--                        <span v-if="item.value === formState.currency">{{item.label}}</span>-->
<!--                       </span>-->
                      </span>
                    </div>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>人民币：{{formState.lngPriceRedelivery}}</a-menu-item>
                        <a-menu-item>美元：{{formState.lngPriceRedelivery}}</a-menu-item>
                        <a-menu-item>欧元：{{formState.lngPriceRedelivery}}</a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.fuelUsagePrinciplesValLoc.name, OCRInfo.fuelUsagePrinciplesValLoc)" >燃油使用原则</span>
                  </template>
                  <a-select v-if="isEdit" :style="{width: '100%'}" placeholder="请选择燃油使用原则" v-model:value="formState.fuelUsagePrinciples" :options="areas2" />
                  <span v-else v-for="item in areas2" :key="item.label">
                    <span v-if="item.value === formState.fuelUsagePrinciples" @click="searchTxtPostion(OCRInfo.fuelUsagePrinciplesValLoc.filedValue, OCRInfo.fuelUsagePrinciplesValLoc)">
                      {{item.label}}
                    </span>
                  </span>
                </a-descriptions-item>
                <a-descriptions-item label="船保证的满载蒸发率">
                  <a-input-number v-if="isEdit"
                                  :min="0"
                                  :max="100"
                                  placeholder="请输入"
                                  :style="{width: '100%'}"
                                  v-model:value="formState.evaporationRate"
                  >
                    <template #addonAfter>
                      <div class="numAfter">
                        %
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.evaporationRateStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="船保证的空载蒸发率">
                  <a-input-number v-if="isEdit"
                                  :min="0"
                                  :max="100"
                                  placeholder="请输入"
                                  :style="{width: '100%'}"
                                  v-model:value="formState.emptyEvaporationRate"
                  >
                    <template #addonAfter>
                      <div class="numAfter">
                        %
                      </div>
                    </template>
                  </a-input-number>
                  <span v-else> {{formState.emptyEvaporationRateStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="油耗保证">
                  <a-input v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.oilConsumptionEnsure" placeholder="请输入油耗保证">
                    <template #addonAfter>
                      <div class="numAfter">
                        tons/day
                      </div>
                    </template>
                  </a-input>
                  <span v-else> {{formState.oilConsumptionEnsureStr}}</span>
                </a-descriptions-item>
                <a-descriptions-item>
                  <template v-slot:label>
                    <span @click="searchTxtPostion(OCRInfo.foeValLoc.name, OCRInfo.foeValLoc)" >FOE</span>
                  </template>
                  <a-input-number v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.foe" placeholder="请输入FOE"></a-input-number>
                  <span v-else  @click="searchTxtPostion(OCRInfo.foeValLoc.filedValue, OCRInfo.foeValLoc)"> {{formState.foe }}</span>
                </a-descriptions-item>
                <a-descriptions-item label="合同状态">
                  <div  v-if="isEdit">
                    <a-select :style="{width: '100%'}"
                              v-model:value="formState.status" placeholder="请选择合同状态" :options="contractType" />
                    <a-form
                        v-if="customInput"
                        ref="formRef"
                        name="dynamic_form_nest_item_type"
                        :model="formState"
                        :style="{marginTop: '15px'}"
                    >
                      <a-space
                          v-for="(user, index) in formState.hireTime"
                          :key="user.id"
                          style="display: flex; margin-bottom: 8px"
                          align="baseline"
                      >
                        <a-form-item
                            :name="['hireTime', index, 'start']"
                            :rules="{ required: true, message: '请选择开始时间'}"
                        >
                          <a-date-picker :locale="locale"  :style="{width: '100%'}"   :show-time="{ format: 'HH:mm' }"
                                          value-format="YYYY-MM-DD HH:mm" v-model:value="user.start" placeholder="请选择开始时间"></a-date-picker>
                        </a-form-item>
                        <span>—</span>
                        <a-form-item
                            :name="['hireTime', index, 'end']"
                            :rules="{required: true, message: '请选择结束时间'}"
                        >
                          <a-date-picker :locale="locale"  :style="{width: '100%'}"   :show-time="{ format: 'HH:mm' }"
                                          value-format="YYYY-MM-DD HH:mm" v-model:value="user.end" placeholder="请选择结束时间"></a-date-picker>
                        </a-form-item>
                        <MinusCircleOutlined @click="removeUser(user)" />
                      </a-space>
                      <a-form-item>
                        <a-button type="dashed" block @click="addUser" class="search-btn2">
                          <PlusOutlined />
                          新增时间段
                        </a-button>
                      </a-form-item>
                    </a-form>
                  </div>
                  <div v-else>
                        <div>
                         <span v-for="item in contractType" :key="item.label">
                          <span v-if="item.value === formState.status">{{item.label}}</span>
                      </span>
                      <div v-if="formState.hireTime.length > 0">
                         <div v-for="(item, index) in formState.hireTime" :key="index" :style="{marginTop: '5px'}">
                            <span>{{dayjs(item.start).format('YYYY年MM月DD日 HH:mm:ss')}} </span>
                            <span>-</span>
                            <span> {{dayjs(item.end).format('YYYY年MM月DD日 HH:mm:ss')}}</span>
                        </div>
                    </div>
                   </div>
                  </div>

                </a-descriptions-item>
                <a-descriptions-item label="合同上传时间">
                  <span>{{formState.createDate}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="创建者">
                  <span>{{formState.createBy}}</span>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </div>
        <div v-if="activeKey === '2'">
          <div class="info-right">
            <div class="pdf-search">
              <div class="pdf-head">
                <div class="pdf-title"></div>
                <div class="pdf-tip"></div>
              </div>
              <div class="pdf-input">
                <a-input placeholder="请输入标签搜索" v-model:value="searchLabel" @change="onSearchLabel">
                  <template #suffix>
                    <SearchOutlined style="color: #0062AD" @click="onSearchLabel" />
                  </template>
                </a-input>
                <div class="input-tip" v-if="contractLabels.length > 0">
                  <div class="tip-item" v-for="(item, index) in contractLabelsSearch" :key="item.id">
                    <div :style="{display: 'flex', width: '95%',cursor: 'pointer'}" @click="lablePosion(item)">
                      <TagsOutlined :style="{color: '#0062AD', marginRight: '5px'}"/>
                      <span class="tip-title-num">{{index + 1}}、</span>
                      <span class="tip-title">{{item.labelValue }}</span>
                      <span class="tip-detail">{{item.labelDetail }}</span>
                    </div>
                    <div>
                      <DeleteOutlined @click="deleteLable(item)" :style="{color: '#F5001D', marginLeft: '5px'}"/>
                    </div>
                  </div>
                </div>
                <EmptyDefault :style="{marginTop: '60px'}" v-else :descriptionInfo="'暂无合同标签'"/>
                <!--              <a-button type="link">-->
                <!--                <template #icon>-->
                <!--                  <PlusOutlined />-->
                <!--                </template>-->
                <!--                新增标签-->
                <!--              </a-button>-->
              </div>

            </div>

          </div>
        </div>
      </a-col>
      <a-col :span="14">
        <div class="info-middle">
          <div class="pdf-box">
            <div class="pdf-title">合同原件</div>
            <div class="pdf-file-box">
              <PdfTestInfo :originalContract="originalContract" :searchInfo="searchInfo"
                           :posionInfo="posionInfo"
                           :contractLabels="contractLabels"
                           @saveLabel="onSaveLabel"/>
            </div>
          </div>
          <div class="file-type">
            <div class="file-head">
              <div class="pdf-title">合同附件</div>
              <div>
                <a-button  class="border-btn" @click="showModal">
                  <template #icon>
                    <CloudUploadOutlined />
                  </template>
                  上传
                </a-button>
              </div>
            </div>
            <div class="file-list">
              <div class="file-item" v-for="item in filesData" :key="item.id">
                <img v-if="item.fileName.includes('.docx')" src="@/assets/images/ResourceContract/word.png" alt="">
                <img v-else-if="item.fileName.includes('.doc')" src="@/assets/images/ResourceContract/word.png" alt="">
                <img v-else src="@/assets/images/ResourceContract/pdf.png" alt="">
                <div class="img-url">
                  <span >
                    <EyeOutlined @click="showWordhandleOk(item.url)"/>
                  </span>
                  <span :style="{paddingLeft: '20px'}">
                     <EditOutlined @click="editFile(item)"/>
                  </span>
                  <span :style="{position: 'absolute', top: '-31px', right: '-5px', color: 'rgba(51,51,51,0.7)'}">
                    <a-popconfirm
                        title="是否确认删除?"
                        ok-text="删除"
                        cancel-text="取消"
                        @confirm="deleteFileConfirm(item)"
                    >
                       <template #icon><question-circle-outlined style="color: #F5001D" /></template>
                        <CloseCircleFilled/>
                       </a-popconfirm>
                  </span>
                </div>
                <div class="file-name">
                  <span :style="{cursor: 'pointer', paddingRight: '10px'}" @click="dowloadFile(item.url)"> {{item.fileName}}</span>
                  <a-tooltip>
                    <template #title>
                      {{item.remark?item.remark : '无'}}
                    </template>
                    <QuestionCircleOutlined />
                  </a-tooltip>
                </div>
              </div>
            </div>
            <EmptyDefault v-if="filesData.length === 0" :descriptionInfo="'暂无合同附件'"/>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>

  <div class="info-bottom">
    <a-row :gutter="16">
      <a-col :span="18">
        <div class="bottom-table">
          <div class="pdf-title">资金结算</div>
          <div class="info-table">
            <a-table :columns="columns" :data-source="data"
                     :row-key="(record) => record.id"
                     :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                     :scroll="{ x: 500}">
            </a-table>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="pdf-state">
          <div class="pdf-title">动态</div>
          <EmptyDefault v-if="timelineData.length === 0" :descriptionInfo="'暂无动态'"/>
          <div class="timeline-box" v-else>
            <a-timeline>
              <a-timeline-item v-for="items in timelineData" :key="items.conId">
                <div class="timeline-title">{{items.optType}}：{{items.optPersonnel}}</div>
                <div class="timeline-time">{{items.optTime}}</div>
              </a-timeline-item>
            </a-timeline>
          </div>
        </div>
      </a-col>
    </a-row>

  </div>
<!-- 合同附件上传 -->
  <a-modal v-model:visible="visible" :width="600" :title="fileTitle"  @ok="handleOk">
    <a-form :model="fileformState" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter=16>
        <a-col :span="10" :style="{paddingBottom: '10px'}">
          <a-form-item name="dragger" no-style>
            <a-upload-dragger
                v-model:fileList="fileList"
                :action="action"
                :beforeUpload="beforeUpload"
                @change="postFile"
                name="file"
                accept=".pdf, .docx"
            >
              <div class="dragger-img">
                <img src="@/assets/images/ResourceContract/file.png" alt="">
              </div>
              <p class="ant-upload-text" :style="{color: '#2C3749',fontSize: '14px'}">将文件拖到此处，或 <span :style="{color: '#0062AD'}">点击上传</span> </p>
              <p class="ant-upload-hint" :style="{color: '#6B7A8B', fontSize: '12px'}" >支持pdf,docx格式</p>
            </a-upload-dragger>
          </a-form-item>
        </a-col>
        <a-col :span="14">
          <div class="form-item-border">
            <a-form-item label="附件名称" name="fileName" :rules="[{ required: true, message: '请输入附件名称' }]">
              <a-input :bordered="false" v-model:value="fileformState.fileName" placeholder="默认文件名称"/>
            </a-form-item>
          </div>
          <div class="form-item-border" :style="{height: '50%'}">
            <a-form-item label="备注" name="remark">
              <a-textarea autoSize :bordered="false" v-model:value="fileformState.remark" placeholder="请输入备注" :rows="3"/>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <div class="from-btn-right">
        <a-button key="back" class="border-btn" @click="colseFileModel">取消</a-button>
        <a-button key="submit" @click="handleOk" class="search-btn1">保存</a-button>
      </div>
    </template>
  </a-modal>
<!-- 合同预览 -->
  <a-modal v-model:visible="wordvisible" :width="800" :bodyStyle="bodyStyle" :footer="null" title="合同预览"  @ok="wordhandleOk">
    <PdfPreview v-if="viewType === 'pdf'" :pdf-url="jsPdf"/>
    <WordView v-if="viewType === 'docx'" :word-url="jsPdf"/>
  </a-modal>
<!-- 补充合同 -->
  <a-modal v-model:visible="fileVisible" :width="600" title="补充合同原件"  @ok="handleFileChange">
    <a-form :model="suppFileForm" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item name="dragger" no-style>
        <a-upload-dragger
            v-model:fileList="contractFileList"
            :action="fileAction"
            :beforeUpload="fileBeforeUpload"
            @change="postSuppFile"
            name="file"
            accept=".pdf"
        >
          <div class="dragger-img">
            <img src="@/assets/images/ResourceContract/file.png" alt="">
          </div>
          <p class="ant-upload-text" :style="{color: '#2C3749',fontSize: '14px'}">将文件拖到此处，或 <span :style="{color: '#0062AD'}">点击上传</span> </p>
          <p class="ant-upload-hint" :style="{color: '#6B7A8B', fontSize: '12px'}" >支持pdf</p>
        </a-upload-dragger>
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="from-btn-right">
        <a-button key="back" class="border-btn" @click="colseFileModel">取消</a-button>
        <a-button key="submit" @click="handleFileChange" class="search-btn1">保存</a-button>
      </div>
    </template>
  </a-modal>
</div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, watch, onMounted} from "vue";
const { proxy  } = getCurrentInstance()
import dayjs from 'dayjs'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import {DownOutlined, SearchOutlined,CloudUploadOutlined,DeleteOutlined,EditOutlined,TagsOutlined, CloseCircleFilled,
  MinusCircleOutlined, PlusOutlined,
  EyeOutlined,QuestionCircleOutlined, UploadOutlined } from '@ant-design/icons-vue';
const jsPdf = ref('')
import PdfPreview from '@/components/PdfView/PdfPreview.vue'
import PdfTestInfo from './PdfTestInfo.vue'
import EmptyDefault from '@/components/EmptyDefault/EmptyDefault.vue'
import WordView from '@/components/WordView/WordView.vue'
import {message} from "ant-design-vue";
import {BASE_URL} from "@/config/proxyIp";
import { useRoute } from 'vue-router';
// const router = useRouter()
const route = useRoute()
const resultObjData = ref({}) // 可编辑的字段
const visible = ref(false);
const originalContract = ref({}) //合同原件
const filesData = ref([]) // 合同附件
const timelineData = ref([]) // 合同状态
const contractLabels = ref([]) // 合同标签
const contractLabelsSearch = ref([])
const searchLabel = ref('')
const fileList = ref([])
const contractFileList = ref([])
const action = ref(`${BASE_URL}/con/common/upload`)
const fileAction = ref(`${BASE_URL}/con/common/upload`)
const isEdit = ref(false)
const fileVisible = ref(false)
const labelStyle = ref({
  color: '#6B7A8B'
})
const bodyStyle = ref({
  height: '800px',
  overflow: 'auto'
})
// 合同类型
const contractTypeAreas = ref([
  {
    label: '租入长期船',
    value: 1
  },
  {
    label: '租入短期船',
    value: 2
  },
  {
    label: '船舶租出',
    value: 3
  },
  {
    label: '内部转租',
    value: 4
  }
])
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
])
// 合同状态
const contractType = ref([
  {
    label: '草稿',
    value: 1
  },
  {
    label: '已签订',
    value: 2
  },
  {
    label: '执行中',
    value: 3
  },
  {
    label: '已完成',
    value: 4
  },
  // {
  //   label: '暂停中',
  //   value: 5
  // },
  {
    label: 'off-hire',
    value: 6
  }
])
// 价格单位
const moneyAreas = ref([
  {
    label: '美元',
    value: 1
  },
  {
    label: '人民币',
    value: 2
  },
  {
    label: '欧元',
    value: 3
  },
])
//使用原则
const areas2 = ref([
  {
    label: 'FIFO',
    value: 1
  },
  {
    label: 'LIFO',
    value: 2
  },
  {
    label: 'LILO',
    value: 3
  }
])
const areas1 = ref([
  {
    label: 'cold',
    value: 'cold'
  },
  {
    label: 'warm with LNG',
    value: 'warm with LNG'
  },
  {
    label: 'inert condition',
    value: 'inert condition'
  },
  {
    label: 'with air',
    value: 'with air'
  },
  {
    label: '自定义',
    value: 5
  }
])
const areasUnit = ref([
  {
    label: '+',
    value: 1
  },
  {
    label: '-',
    value: 2
  },
  {
    label: '±',
    value: 3
  }
])
const columns = ref([
  {
    title: '序号',
    dataIndex: 'a1',
    key: 'a1',
    width: '80px',
    fixed: 'left',
    align: 'center'
  },
  {
    title: '订单编号',
    dataIndex: 'a2',
    key: 'a2',
    fixed: 'left',
    align: 'center'
  },
  {
    title: '订单类型',
    dataIndex: 'a3',
    key: 'a3',
    fixed: 'left',
    align: 'center'
  },
  {
    title: '订单金额',
    dataIndex: 'a4',
    align: 'center'
  },
  {
    title: '对方账户名称',
    dataIndex: 'a5',
    align: 'center'
  },
  {
    title: '对方银行地址',
    dataIndex: 'a6',
    align: 'center'
  },
  {
    title: '对方账户号码',
    dataIndex: 'a26',
    align: 'center'
  },
])
const data = ref([])
const fileTitle = ref('上传合同附件')
const labelCol = ref(
    {
      style: {
        width: '100px'
      },
    },
)

const wrapperCol = ref({
  span: 20
})
const formState = reactive({
  contractNumber: '', //合同编号
  contractName: '', //合同名称
  contractType: '', // 合同类型
  tradeType: '', // 贸易主体
  signingDate: '', // 签订日期
  imo: '', // IMO
  shipName: '', // 船舶名称
  shipowner: '', // 船东
  tenant: '', // 租家
  leaseTerm: '', // 租期
  startingDateOfLeaseBegin: '', // 起租日期-开始
  startingDateOfLeaseEnd: '', // 起租日期-结束
  startingDateOfLeases: [], // 起租日期
  startingDateOfLease: '',
  rent: '', // 租金(每天)
  rentList: [], // 租金(每天)
  deliveryDateBegin: '', // 交船日期-开始
  deliveryDateEnd: '', // 交船日期-结束
  deliveryDate: '', // 交船日期
  deliveryDates: '', // 交船日期
  placeOfDeliveryOfShip: '', // 交船地点
  redeliveryDateBegin: '', // 还船日期-开始
  redeliveryDateEnd: '', // 还船日期-结束
  redeliveryDate: '', // 还船日期
  redeliveryDates: '', // 还船日期
  placeOfRedeliveryOfShip: '', //还船地点
  shipSpeed: '', // 船速(Knots)
  shipSpeedForRedeliveryFee: '', // 船速（用作计算交还船费）
  deliveryStatus: undefined, // 交船状态
  deliveryStatusDetail: '', // 交船状态自定义内容
  redeliveryStatus: '', // 还船状态(数值，单位立方米)
  deliveryFuelQuantity: '', // 交船燃油量
  refundFuelQuantity: '', // 还船燃油量
  deliveryLngVolume: '', // 交船LNG量
  lngQuantityReturnedToTheShip: '', // 还船LNG量
  deliveryNotice: '', // 交船通知
  redeliveryNotice: '', // 还船通知
  cabinCapacity: '', // 舱容（单位立方米）
  deliveryFee: '', // 交船费
  redeliveryFee: '', // 还船费
  declareReserveAmount: '', // 宣布留底量(单位天)
  lngPriceDelivery: '', // LNG价格（交船）
  lngPriceRedelivery: '', // LNG价格（还船）
  fuelUsagePrinciples: '', // 燃油使用原则(FIFO、LILO)
  evaporationRate: '', // 船保证的满载蒸发率
  oilConsumptionEnsure: '', // 油耗保证（tons/day）
  currency: 1, // 币种
  contractStatus: '', // 合同状态
  createDate: '', // 容创建时间
  createBy: '', // 创建人
  filePath: '',
  fileType: '',
  foe: '',
  leaseTermUnit: '', // 租期类型
  leaseTermValue: '', // 误差值
  leaseTermValueUp: '',
  leaseTermValueUpDown: '',
  Capacity1: '+',
  Capacity3: '-',
  status: '',
  shipSpeedStr : '', // 船速（Service Speed）
  deliveryFuelQuantityStr  : '', // 交船燃油量
  shipSpeedForRedeliveryFeeStr : '', // 船速（交还船费）
  refundFuelQuantityStr : '', // 还船燃油量
  deliveryLngVolumeStr : '', // 交船LNG量
  redeliveryStatusStr : '', // 还船状态
  lngQuantityReturnedToTheShipStr : '', // 还船LNG量
  deliveryFeeStr : '', // 交船费
  cabinCapacityStr : '', // 舱容
  lngPriceDeliveryStr : '', // LNG价格（交船）
  lngPriceRedeliveryStr : '', //LNG价格（还船）
  declareReserveAmountStr : '', //宣布留底量
  redeliveryFeeStr : '', // 还船费
  evaporationRateStr : '', //船保证的蒸发率
  oilConsumptionEnsureStr : '', //油耗保证
  rentStr : '', //租金
  leaseTermStr : '', //租期
  hireTime: [], //off-hire状态的时间
  emptyEvaporationRate: '', //船保证的空载蒸发率
  emptyEvaporationRateStr: '', //船保证的空载蒸发率
  vlDeliveryFuelQuantity: '', //交船燃油量·VLSFO
  vlDeliveryFuelQuantityStr: '',
  vlrefundFuelQuantity: '', //还船燃油量·VLSFO
  vlRefundFuelQuantityStr: '',
  rightsHolder: '', //权利方
  cerTime: '', //SIRE 证书有效持续时间
  cerTimeStr: '', //SIRE 证书有效持续时间
  shipDistance: '', //距离
  shipDistanceStr: '', //距离
})
const fileformState = ref({
  conId: route.query.id,
  url: '',
  fileName: '',
  remark: ''
})
watch(() => resultObjData.value, (newVal) => {
  console.log('数据更新了编辑信息', newVal)
  resultObjData.value = newVal
  Object.assign(formState, newVal )
  formState.startingDateOfLeases = [formState.startingDateOfLeaseBegin, formState.startingDateOfLeaseEnd]
  formState.deliveryDates = [formState.deliveryDateBegin, formState.deliveryDateEnd]
  formState.redeliveryDates = [formState.redeliveryDateBegin, formState.redeliveryDateEnd]
  formState.currency = formState.currency? formState.currency : 1
  formState.hireTime = formState.hireTime? formState.hireTime : []
  formState.rentList = formState.rentList? formState.rentList : []
  console.log('数据更新了编辑信息startingDateOfLease', formState.startingDateOfLeases)
})
watch(() => originalContract.value, (newVal) => {
  console.log('数据更新了合同原件信息', newVal)
  originalContract.value = newVal
},{
  deep: true
} )
watch(() => contractLabels.value, (newVal) => {
  console.log('数据更新了标签信息', newVal)
  contractLabels.value = newVal
  contractLabelsSearch.value = newVal
},{
  deep: true
})
watch(() => filesData.value, (newVal) => {
  console.log('数据更新了合同附件信息', newVal)
  filesData.value = newVal
},{
  deep: true
} )
const wordvisible = ref(false)
const viewType = ref('')
const showWordhandleOk = (url) => {
  console.log('点击了没', url)
  wordvisible.value = true
  let houzui = url.substring(url.lastIndexOf('.'), url.length).toLowerCase()
  let res1 = ['.pdf'].includes(houzui)
  if (res1) {
    viewType.value = 'pdf'
  } else {
    viewType.value = 'docx'
  }
  jsPdf.value = url
}
const wordhandleOk = () => {
  wordvisible.value = false
}
/**
 * 保存标签后，更新数据
 * */
const onSaveLabel = (val) => {
  if (val) {
    getInfoDetails()
    activeKey.value = '2'
  }
}
/**
 * 定位标签
 * */
const posionInfo = ref({})
const lablePosion = (item) => {
  posionInfo.value = item
}
/**
 * 删除合同标签
 * */
const deleteLable = (item) => {
  proxy.$api.deletwContranctLabels({id: item.id.toString(), conId: item.conId.toString()}).then(res => {
    if (res.resultCode === 0) {
      message.success('删除成功')
      getInfoDetails()
    }
  })
}
/**
 * 交船状态修改
 * */
const isInput = ref(false)
const delSelectChange = (e) => {
  console.log('选择了的状态', e)
  if (e === 5) {
    isInput.value = true
    formState.deliveryStatus = ''
  } else {
    isInput.value = false
  }
}
/**
 * 编辑信息
 * */
const editClick = () => {
  isEdit.value = true
}
const saveClick = () => {
  Object.assign(formState, {
    startingDateOfLeaseBegin: formState.startingDateOfLeases[0],
    startingDateOfLeaseEnd: formState.startingDateOfLeases[1],
    deliveryDateBegin: formState.deliveryDates[0],
    deliveryDateEnd: formState.deliveryDates[1],
    redeliveryDateBegin: formState.redeliveryDates[0],
    redeliveryDateEnd: formState.redeliveryDates[1]
  })
  proxy.$api.putShipping(formState).then(res => {
    if (res.resultCode === 0) {
      isEdit.value = false
      getInfoDetails()
    }
  })
}
const cancelClick = () => {
  isEdit.value = false
  isInput.value = false
  fileVisible.value = false
}
/**
 * 获取船运合同详情
 * */
const getInfoDetails = () => {
  filesData.value = []
  proxy.$api.getShippingInfo({id: route.query.id}).then(res => {
    console.log('船运合同详情', res)
    resultObjData.value = res.resultObject.data
    let newFilesData =  res.resultObject.files
    if (newFilesData.length > 0) {
      newFilesData.map(item => {
        if(item.fileType === 1) {
          Object.assign(item, {
            contractName: resultObjData.value.contractName
          })
          originalContract.value = item
        } else {
          filesData.value.push(item)
        }
      })
    }
    timelineData.value = res.resultObject.optRecord
    contractLabels.value = res.resultObject.contractLabels
  }).catch(err => {
    console.log('请求的错误', err)
  })
}
/**
 * 文件上传
 * */
const postFile = (info) => {
  console.log('上传文件1', info)
  const status = info.file.status
  console.log('上传文件状态', status)
  if (status === 'done') {
    console.log('上传文件信息441', info)
    fileformState.value.fileName = info.file.name
    fileformState.value.url = info.file.response.resultObject
  } else if (status === 'error') {
    message.error(`${info.file.name} 文件上传失败`);
  }
  console.log('上传文件信息1', fileformState.value)
}
const beforeUpload = (file) => {
  console.log('上传文件2', file)
  let houzui = file.name.substring(file.name.lastIndexOf('.'), file.name.length).toLowerCase()
  let res = ['.pdf','.docx'].includes(houzui)
  // '.doc', '.docx'
  if (!res) {
    fileList.value = []
    message.error('请上传PDF或者docx文件')
  }
  return res

}
/**
 * 合同附件表单提交
 * */
const showModal = () => {
  visible.value = true
  fileformState.value = {
    conId: route.query.id,
    url: '',
    fileName: '',
    remark: ''
  }
  fileList.value = []
};
const colseFileModel = () => {
  visible.value = false
}
const handleOk = () => {
  if (fileTitle.value === '上传合同附件') {
    proxy.$api.postUploadContractFiles(fileformState.value).then(res => {
      console.log('上传合同附件成功', res)
      visible.value = false;
      message.success('上传附件成功')
      getInfoDetails()
    })
  } else {
    proxy.$api.putUploadContractFiles(fileformState.value).then(res => {
      console.log('修改合同附件成功', res)
      visible.value = false;
      message.success('修改附件成功')
      getInfoDetails()
    })
  }

};
/**
 * 编辑合同附件
 * */
const editFile = (item) => {
  fileTitle.value = '编辑合同附件'
  visible.value = true
  fileformState.value = item
  fileList.value = []
  let obj = {
    uid:item.conId,
    name: item.fileName,
    status: 'done'
  }
  fileList.value.push(obj)
}
/**
 * 下载附件
 * */
const dowloadFile = (url) => {
  window.location.href = url
}
/**
 * 删除附件
 * */
const deleteFileConfirm = (item) => {
  console.log('删除的id', item.id.toString())
  proxy.$api.deleteUploadContractFiles({id: item.id.toString(),conId: item.conId.toString()}).then(() => {
    message.success('删除成功')
    getInfoDetails()
  })
}
/**
 * 搜索的文字
 * */
const searchInfo = ref({})
const searchTxtPostion = (txt, location) => {
  console.log('我拿到的搜索的值', location)
  let obj = {
    txt: txt,
    loc: location
  }
  searchInfo.value = obj
}
/**
 * 搜索标签
 * */
const onSearchLabel = () => {
  if (searchLabel.value) {
    console.log('搜索了没', searchLabel.value);
    let arrLabel = ['labelValue']
    let testLabel = contractLabels.value.filter((item) => {
      for (let i = 0; i < arrLabel.length; i++) {
        if (item[arrLabel[i]] !== undefined || item[arrLabel[i]] !== null) {
          if (item[arrLabel[i]].indexOf(searchLabel.value) >= 0) {
            return item
          }
        }
      }
    })
    console.log('模糊查了没', testLabel)
    contractLabelsSearch.value = testLabel
  } else {
    contractLabelsSearch.value = contractLabels.value
  }
}
/**
 * 补充合同原件
 * */
const suppFileForm = reactive({
  conId: route.query.id,
  url: ''
})
const showFileModel = () => {
  fileVisible.value = true
}
const postSuppFile = (info) => {
  const status = info.file.status
  if (status === 'done') {
    suppFileForm.url = info.file.response.resultObject
  } else if (status === 'error') {
    message.error(`${info.file.name} 文件上传失败`);
  }
}
const fileBeforeUpload = (file) => {
  let houzui = file.name.substring(file.name.lastIndexOf('.'), file.name.length).toLowerCase()
  let res = ['.pdf'].includes(houzui)
  if (!res) {
    contractFileList.value = []
    message.error('请上传PDF文件')
  }
  return res
}
const handleFileChange = () => {
  Object.assign(suppFileForm, {
    conId: route.query.id
  })
  proxy.$api.supppleShippingContract(suppFileForm).then(res => {
    if (res.resultCode === 0) {
      message.success('上传成功')
      fileVisible.value = false
      getInfoDetails()
    }
  })
}
const activeKey = ref('1')
const changeRadio = (e) => {
  activeKey.value = e.target.value
  searchLabel.value = ''
}
const selectOpen = ref(false)
const changeCutom = () => {
  isInput.value= false
  selectOpen.value = true
}
const customInput = ref(false)
// 合同状态更改
watch(() => formState.status, (val) => {
  customInput.value = false
  if (val > 1) {
    contractType.value.map(item => {
      if (item.value === 1) {
        Object.assign(item, {
          disabled: true
        })
      }
    })
  }
  if (val === 3) {
    contractType.value.map(item => {
      if (item.value === 1) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 2) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 4) {
        Object.assign(item, {
          disabled: false
        })
      }
    })
  }
  if (val === 6) {
    customInput.value = true
    contractType.value.map(item => {
      if (item.value === 1) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 2) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 4) {
        Object.assign(item, {
          disabled: true
        })
      }
    })
  }
  if (val === 4) {
    contractType.value.map(item => {
      if (item.value === 1) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 2) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 3) {
        Object.assign(item, {
          disabled: false
        })
      }
      if (item.value === 6) {
        Object.assign(item, {
          disabled: false
        })
      }
    })
  }
})
/**
 * 获取OCR信息
 * */
const OCRInfo = ref({})
const getOcr = () => {
  proxy.$api.getShipOcrInfo({id: route.query.id}).then(res => {
    console.log('OCR的信息', res)
    OCRInfo.value = res.resultObject
  })
}
/**
 * off-hire状态
 * */
const formRef = ref();
const formRentRef = ref()
const removeUser = item => {
  let index = formState.hireTime.indexOf(item);
  console.log('删除的是', item)
  if (index !== -1) {
    formState.hireTime.splice(index, 1);
  }
};
const addUser = () => {
  console.log('formState.hireTime', formState.hireTime, formState)
  formState.hireTime.push({
    start: '',
    end: '',
    id: Date.now(),
  });
};
/**
 * 租金
 * */
const removeRent = item => {
  let index = formState.rentList.indexOf(item);
  if (index !== -1) {
    formState.rentList.splice(index, 1);
  }
};
const addRent = () => {
  formState.rentList.push({
    rentDateBegin: '',
    rentDateEnd: '',
    rentParagraph: '',
    rentUnit: 1,
    id: Date.now(),
  });
};
onMounted(() => {
  getInfoDetails()
  getOcr()
})
</script>

<style lang="scss" scoped>
.dragger-img {
  img {
    width: 164px;
    height: 114px;
  }
}
.table-btn-flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px 18px;
  background: #fff;
  .ant-radio-button-wrapper-checked {
    background: #0062AD;
    color: #ffffff;
  }
  .pdf-info-btn {
    margin-top: 10px;
  }
}
.numipt1 {
  width: 52%;
  padding-top: 1px;
}
.numipt2 {
  width: 30px;
  margin: 0 2px;
}
.numipt3 {
  width: 50px;
  padding-top: 1px;

}
.numipt4 {
  width: 30px;
  margin: 0 2px;
}
.numipt5 {
  width: 50px;
  padding-top: 1px;
}
@media (min-width: 1440px) {
  .numipt1 {
    width: 57%;
    padding-top: 1px;
  }
}
@media (min-width: 1680px) {
  .numipt1 {
    width: 65.5%;
    padding-top: 1px;
  }
}
@media (min-width: 1920px) {
  .numipt1 {
    width: 70.5%;
    padding-top: 1px;
  }
}
@media (min-width: 2300px) {
  .numipt1 {
    width: 77.7%;
    padding-top: 1px;
  }
}
</style>
